<template>
	<view>
		<view class="title">
				<text>猜你喜欢</text>
			</view>
			<view class="favor-list">
				<navigator :url="`/pages/detail/detail?id=${item.id}`" class="favor-item" v-for="item in dataList" :key="item.id">
					<image :src="item.picture" mode=""></image>
					<text class="name">{{item.name}}</text>
					<text class="price">￥{{item.price}}</text>
				</navigator>
			</view>
			<view class="buttom">
				{{ finish ? '没有更多数据~' : '正在加载...' }}
			</view>
		</view>
</template>

<script>
	export default{
		data(){
			return{
				page: 1,
				dataList: [],
				finish: false
			}
		},
		mounted() {
			this.reset()
			this.getFavorData()
		},
		methods:{
			async getFavorData(){
				if(this.finish === true){
					return
				}
				const res = await this.$http({
					url: '/home/goods/guessLike',
					data: {
						page: this.page,
						pageSize: 10
					}
				})
				console.log(res.data)
				this.dataList.push(...res.data.result.items)
				if(this.page >= res.data.result.pages){
					this.finish = true
				}else{
					this.page++
				}
			},
			reset(){
				this.page = 1,
				this.dataList = [],
				this.finish = false
			}
		}
	} 
</script>

<style lang="scss">
	view{
		.title{
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 36rpx 0 40rpx;
			font-size: 32rpx;
			color: #262626;
			text{
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				 &::before,
				 &::after {
				      content: '';
				      width: 20rpx;
				      height: 20rpx;
				      background-image: url(@/static/images/bubble.png);
				      background-size: contain;
				      margin: 0 10rpx;
					  display: block;
				    }
			}
		}
		.favor-list{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 0 20rpx;
			.favor-item{
				 width: 345rpx;
				 display: flex;
				 flex-direction: column;
				 justify-content: space-between;
				 align-items: flex-start;
				 background-color: #fff;
				 padding: 20rpx;
				 box-sizing: border-box;
				 margin-bottom: 20rpx;
				 image{
					 width: 304rpx;
					 height: 304rpx;
				 }
				 .name{
					 width: 304rpx;
					 margin: 10rpx 0;
					 font-size: 26rpx;
					 min-height: 75rpx;
					 overflow: hidden;
					 text-overflow: ellipsis;
				 }
				 .price{
					color: #cf4444;
					font-size: 26rpx;
					display: block;
				 }
			}
		}
		.buttom{
			  text-align: center;
			  font-size: 28rpx;
			  color: #666;
			  padding: 20rpx 0;
			  }
	}
</style>